import React, { Component } from 'react';
import Footer from './../../components/footer';
import Banner from './../../components/banner';
import { getIndex } from './../../api'
import style from './index.module.scss'
import { NavLink } from 'react-router-dom'
import { Tabs } from 'antd-mobile';

class Com extends Component {
  state = {
    bannerlist: [],
    sublist: [],
    topiclist: [],
    imgHeight: 280,
    value: '',
    alllist: [],
    catagorys: {},
    adlist: [],
    travellist: []
  }
  componentDidMount() {
    getIndex({page: 1}).then(res=>{
      this.setState({
        travellist: res.data.data.travels,
        topiclist: res.data.data.topics,
        alllist: res.data.data.categories,
        catagorys: res.data.data.categories[0],
        sublist: res.data.data.subjects,
        bannerlist: res.data.data.banner,
        adlist: res.data.data.banner[0]
      })
    })
  }
  render() {
    const tabs = [
      { title: '全部', key: 't1' },
      { title: '关注', key: 't2' },
      { title: '折扣', key: 't3' },
      { title: '当季', key: 't4' },
      { title: '游记', key: 't5' }
    ];
    return (
      <div className='box'>
        <div className="content">
          {/* 轮播图 */}
          <div className={style.banner}>
            <Banner bannerlist={this.state.bannerlist}></Banner>
          </div>
          {/* 搜索 */}
          <NavLink to='/search'>
            <input className={style.search} type='text' placeholder='搜索' disabled />
          </NavLink>
          {/* 导航栏选择*/}
          <ul className={style.nav}>
            <NavLink to="/sillbag">
              <img src="/images/锦囊.png" alt="" />
              <p>锦囊</p>
            </NavLink>
            <NavLink to="/video">
              <img src="/images/视频.png" alt="" />
              <p>视频</p>
            </NavLink>
            <NavLink to="/question">
              <img src="/images/问答.png" alt="" />
              <p>问答</p>
            </NavLink>
            <NavLink to="/pattner">
              <img src="/images/结伴.png" alt="" />
              <p>结伴</p>
            </NavLink>
            <NavLink to="/special">
              <img src="/images/专栏.png" alt="" />
              <p>专栏</p>
            </NavLink>
          </ul>
          {/* 精选专题 */}
          <p className={style.subject}>精选专题</p>
          <div className={style.docs}>
            {
              this.state.sublist.map(item => {
                return <img key={item.id} src={item.img} alt="" onClick={
                  ()=>{
                    this.props.history.push({pathname: '/activity', state: {activityid:item.id}})
                    sessionStorage.setItem('activityid', item.id)
                  }
                } />
              })
            }
          </div>
          {/* 小标导航栏 */}
          <div >
            <Tabs tabs={tabs}
              initialPage={0}
              tabBarActiveTextColor='rgba(74,216,130,1)'
              tabBarTextStyle={{ fontSize: '0.13rem', lineHeight: '0.49rem' }}
              tabBarUnderlineColor='#4AD882'
              tabBarInactiveTextColor='rgba(51,51,51,1)'
              animated={false}
              useOnPan={false}
              onChange={(TabData) => {
                // console.log(TabData)
                const num = TabData.key === "t1" ? 0 : TabData.key ==="t2" ? 1 : TabData.key ==="t3" ? 2 : TabData.key ==="t4" ? 3 : 4
                  this.setState({
                    catagorys: this.state.alllist[num]
                  })
              }}>
              <div style={{ marginTop: '0.15rem', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', height: 'auto', backgroundColor: '#fff', paddingLeft: '0.15rem' }}>
                <img src={this.state.catagorys.img} style={{width: '3.45rem', height: '1.3rem'}} alt="" />
                <a style={{ marginBottom: '0.1rem', paddingLeft: '0.1rem', width: '3.2rem', fontSize: '0.17rem', color: '#000', lineHeight: '0.24rem' }} href="/#">{this.state.catagorys.title}</a>
                <p className={style.duohang} style={{ marginBottom: '0.1rem', paddingLeft: '0.1rem', width: '3.2rem', fontSize: '0.17rem', color: '#333333', lineHeight: '0.24rem', opacity: 0.8 }}>{this.state.catagorys.title}</p>
                <p style={{ paddingLeft: '0.1rem', height: '0.22rem', marginBottom: '0.22rem' }}><img style={{ marginRight: '0.15rem', height: '0.22rem', width: '0.22rem' }} src={this.state.catagorys.avatar} alt=''></img><i>{this.state.catagorys.username}</i></p>
              </div>
            </Tabs>
          </div>
          {/* 话题 */}
          <p className={style.topic}>今日话题</p>
          <ul className={style.topicdocs}>
            {
              this.state.topiclist.map(item => {
                return <li key={item.topicid} onClick={
                  ()=>{
                    this.props.history.push({pathname: '/topic', state:{topicid: item.topicid}})
                    sessionStorage.setItem('topicid', item.topicid)
                  }
                }>
                  <span>{item.date}</span>
                  <p>{item.content}</p>
                </li>
              })
            }
          </ul>
          {/* 广告图 */}
          <img src={this.state.adlist.img} alt="" style={{ width: '3.45rem', height: '1.3rem',borderRadius: '0.15rem', marginLeft: '0.15rem', marginBottom: '0.1rem' }} />
          {/* 剩余游记 */}
          {
            this.state.travellist.map(item => {
              return <div key={item.travelid} style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', height: 'auto', backgroundColor: '#fff', paddingLeft: '0.15rem' }}>
                <img src={item.img} style={{ width: '3.45rem', height: '1.3rem'}} alt="" />
                <a style={{ marginBottom: '0.1rem', paddingLeft: '0.1rem', width: '3.2rem', fontSize: '0.17rem', color: '#000', lineHeight: '0.24rem' }} href="/#">{item.title}</a>
                <p className={style.duohang} style={{ marginBottom: '0.1rem', paddingLeft: '0.1rem', width: '3.2rem', fontSize: '0.17rem', color: '#333333', lineHeight: '0.24rem', opacity: 0.8 }}>{item.content}</p>
                <p style={{ paddingLeft: '0.1rem', height: '0.22rem', marginBottom: '0.22rem' }}><img style={{ marginRight: '0.15rem', height: '0.22rem', width: '0.22rem' }} src={item.avatar} alt=''></img><i>{item.username}</i></p>
              </div>
            })
          }
        </div>
        <Footer></Footer>
      </div>
    );
  }
}

export default Com
